<template>
  <div class="home-banner-box bs-border f16" :style="bannerBgStyle">
    <div class="home-banner-swiper block-center rel">
      <!-- 首页 -->
      <aside
        v-if="
          bannerLeftType &&
            (bannerLeftProfessions.length ||
              (Object.keys(left_column).length &&
                (left_column[1].length ||
                  left_column[2].length ||
                  left_column[3].length)))
        "
        class="profession-nav pointer"
        :style="bannerLeftClass"
      >
        <template v-if="bannerLeftProfessions.length && +bannerLeftType === 1">
          <a
            v-for="(item, index) in bannerLeftProfessions.slice(0, 7)"
            class="profession-nav-item text-ess-1 black"
            style="display: block"
            :title="item.name"
            @click="gotoProfessionPage(item)"
            :href="parseFullPath(item.path)"
            target="_blank"
            :key="index"
          >
            {{ item.name }}
          </a>
          <ul
            class="rel more-panel-relative-box"
            v-if="bannerLeftProfessions.slice(7).length"
          >
            <li>
              <a
                href="javascript:;"
                class="profession-nav-item more-menu-item text-ess-1 black rel"
              >
                更多&gt;&gt;
              </a>
            </li>
            <li class="more-panel">
              <a
                v-for="(item, index) in bannerLeftProfessions.slice(7)"
                :key="index"
                @click="gotoProfessionPage(item)"
                :href="parseFullPath(item.path)"
                class="more-link-item text-ess-1"
                :rel="['www.zlxueba.com'].includes(item.path) ? 'nofollow' : ''"
                target="_blank"
              >
                {{ item.name }}
              </a>
            </li>
          </ul>
        </template>
        <!-- 专业首页 -->
        <template
          v-else-if="+bannerLeftType === 2 && Object.keys(left_column).length"
        >
          <a
            :href="
              left_column[1][0].jump_extend &&
              left_column[1][0].jump_extend.jump_url
                ? left_column[1][0].jump_extend.jump_url
                : './guide/'
            "
            class="left-top text-ess-1"
            v-if="left_column[1][0]"
          >
            <span class="left-top-title" :title="left_column[1][0].name">
              {{ left_column[1][0].name }}
            </span>
            <span
              style="display: inline-block"
              v-if="left_column[1][0].expire_time"
            >
              <span class="cut-down-day">
                {{ left_column[1][0].expire_time | filterDay }}
              </span>
              <span class="left-top-title">天</span>
            </span>
          </a>
          <div
            class="left-middle"
            v-if="Array.isArray(left_column[2]) && left_column[2].length"
          >
            <template v-for="(item, index) in left_column[2]">
              <a
                :key="index"
                class="middle-item flex-wrap flex-center-wrap banner-left-middle"
                v-if="item.jump_extend"
                :href="parseFullPath(item.path)"
                target="_blank"
                @click="
                  advertisementJump(item, {
                    type: 'click',
                    name: '活动区中分栏',
                    content: currentProfessionName + '_' + item.id
                  })
                "
              >
                <zl-icon
                  style="margin-right: 3px; line-height: 1"
                  icon="icon-huodong"
                  :icon-style="{ width: '16px', height: '18px' }"
                ></zl-icon>
                <span class="text-ess-1" style="display:block">
                  {{ item.name }}
                </span>
              </a>
            </template>
          </div>
          <div class="white-line"></div>
          <div
            class="left-bottom flex-wrap flex-multi-row"
            v-if="Array.isArray(left_column[3]) && left_column[3].length"
          >
            <template v-for="(item, index) in left_column[3]">
              <a
                :key="index"
                :href="parseFullPath(item.path)"
                target="_blank"
                class="flex-wrap flex-center-wrap text-ess-1 bottom-item banner-left-middle"
                :class="{ 'flex-justify-end': (index + 1) % 2 ? false : true }"
                :title="
                  `${currentProfessionName ? currentProfessionName : ''}${
                    item.name
                  }`
                "
                v-if="item.jump_extend"
                @click="
                  advertisementJump(item, {
                    type: 'click',
                    name: '活动区下分栏',
                    content:
                      currentProfessionName + '_' + item.name + '_' + item.id
                  })
                "
              >
                <zl-icon
                  style="margin-right: 3px"
                  :icon="'icon-' + item.label"
                  :icon-style="{ width: '16px', height: '18px' }"
                ></zl-icon>
                <span class="text-ess-1" style="display:block">
                  {{ item.name }}
                </span>
              </a>
            </template>
          </div>
        </template>
      </aside>
      <el-carousel
        v-if="carousels.length"
        class="banner-swiper"
        height="100%"
        :interval="5000"
        trigger="click"
        arrow="never"
        @change="
          index => {
            currentIndex = index
          }
        "
        ref="carousel"
      >
        <el-carousel-item v-for="(item, index) in carousels" :key="index">
          <a :href="parseFullPath(item.path)" target="_blank">
            <img
              alt="banner图片"
              v-if="item.banner_url && index === 0"
              class="carousel-img"
              :src="parseResourceUrl(item.banner_url)"
              @click="
                advertisementJump(item, {
                  type: 'ad',
                  ads_name: item.banner_name,
                  element_name: currentProfessionId ? 6 : 2,
                  profession_id: currentProfessionId
                })
              "
            />
            <img
              alt="banner图片"
              v-if="item.banner_url && index !== 0"
              class="carousel-img"
              v-lazy="parseResourceUrl(item.banner_url)"
              @click="
                advertisementJump(item, {
                  type: 'ad',
                  ads_name: item.banner_name,
                  element_name: currentProfessionId ? 6 : 2,
                  profession_id: currentProfessionId
                })
              "
            />
          </a>
        </el-carousel-item>
      </el-carousel>
      <aside
        v-if="headlines.length"
        class="top-news pointer"
        :style="bannerRightClass"
      >
        <!-- 首页 -->
        <template v-if="headlines.length && +bannerRightType === 1">
          <div class="flex-center-wrap flex-justify-between">
            <h2 class="flex-center-wrap">
              <img
                class="title-img"
                src="//image.zlketang.com/public/news/images/new_official/home/ttzj-title.png"
                alt="头条资讯"
              />
            </h2>
            <a
              class="flex-center-wrap more-box"
              :href="parseFullPath(`/${currentProfessionPath}/all/`)"
              target="_blank"
            >
              <span class="more-text">更多</span>
              <i class="iconfont icon-quanbu more-icon"></i>
            </a>
          </div>
          <ul class="info-list">
            <li
              class="info-list-item text-ess-1"
              v-for="(item, index) in headlines.slice(0, 5)"
              :key="index"
              :title="item.name"
              @click="jumpAdDetail(item)"
            >
              <a :href="parseFullPath(item.path)" target="_blank">
                {{ item.name }}
              </a>
            </li>
          </ul>
        </template>
        <!-- 选课中心页 -->
        <template v-else-if="+bannerRightType === 2">
          <div class="course-info-list">
            <div
              class="course-info-list-item text-ess-1"
              :class="{
                'course-info-list-item-current': index === currentIndex
              }"
              v-for="(item, index) in headlines.slice(0, 5)"
              :key="index"
              :title="item.name"
              @click="jumpAdDetail(item)"
              @mouseover="$refs.carousel.setActiveItem(index)"
            >
              <!-- 当是资讯时 name ：广告时：banner_name -->
              <a :href="parseFullPath(item.path)" target="_blank">
                {{ item.name ? item.name : item.banner_name }}
              </a>
            </div>
          </div>
        </template>
      </aside>
    </div>
  </div>
</template>

<script>
import zlIcon from '@/components/zlIcon.vue'
export default {
  name: 'zl-banner',
  components: {
    'zl-icon': zlIcon
  },
  props: {
    bannerLeftProfessions: {
      type: Array,
      default: () => []
    },
    carousels: {
      type: Array,
      default: () => []
    },
    headlines: {
      type: Array,
      default: () => []
    },
    // 左侧banner展示的内容类型，1：展示首页左侧类型，2：展示专业首页左侧类型
    bannerLeftType: {
      type: [Number, String],
      default: ''
    },
    // 右侧banner展示的内容类型，1：展示首页左侧类型，2：展示专业首页左侧类型
    bannerRightType: {
      type: [Number, String],
      default: ''
    },
    // banner左侧样式
    bannerLeftClass: {
      type: Object,
      default: () => ({})
    },
    // banner右侧样式
    bannerRightClass: {
      type: Object,
      default: () => ({})
    },
    // banner背景
    bannerBgStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 专业首页时左侧数据
    left_column: {
      type: Object,
      default: () => ({ 1: [], 2: [], 3: [] })
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      },
      // 当前专业
      currentProfessionId: '',
      currentProfessionName: '',
      currentIndex: 0,
      //默认初级会计，当前专业
      currentProfessionPath: 'cjkj'
    }
  },
  filters: {
    filterDay(day) {
      return Math.ceil(day / 86400)
    }
  },
  methods: {
    // 广告统一跳转
    jumpAdDetail(row) {
      //商品列表页埋点
      let router = this.$route.fullPath
      if (router.includes('/courses/')) {
        this.zlaBtn = {
          key_name: '商品促销活动推荐',
          key_content: row.name ? row.name : row.banner_name
        }
      } else {
        this.zlaBtn = {
          key_name: '头条资讯',
          key_content: this.currentProfessionName
            ? this.currentProfessionName
            : '头条资讯'
        }
      }
      // 对象类型 1-资讯 2-广告 3-链接
      this.advertisementJump(row)
      // let { object_type, object_id, path, object_url, jump_extend, banner_type } = row
      // let jumpUrl = ''
      // if (+object_type === 1) {
      //   jumpUrl = path + `_detail/${object_id}.html`
      // } else if (banner_type || +object_type === 2) {
      //   //存在即为广告
      //   this.advertisementJump(row)
      //   return
      // } else if (+object_type === 3) {
      //   jumpUrl = object_url
      // }
      // if (jumpUrl) {
      //   this.goTo(jumpUrl, { target: '_blank' })
      // }
    },
    // 跳转到专业首页
    gotoProfessionPage(item) {
      this.zlaBtn = {
        key_name: '专业选择',
        key_content: item.name
      }
      // let { path, jump_extend, jump_type } = item
      // if (+jump_type === 2) {
      //   this.goTo(`${jump_extend.jump_link}`, { target: '_blank', watch: true })
      // } else {
      //   this.goTo(`/${item.path}`, { target: '_blank', watch: true })
      // }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  mounted() {
    let { meta, path } = this.$route
    if (meta.profession_id) {
      this.currentProfessionId = meta.profession_id
      this.currentProfessionName = meta.profession_name
      // 去掉前后/
      this.currentProfessionPath =
        path.slice(-1) === '/' ? path.slice(0, -1) : path
      this.currentProfessionPath =
        this.currentProfessionPath.slice(0, 1) === '/'
          ? this.currentProfessionPath.slice(1)
          : this.currentProfessionPath
    }
  }
}
</script>

<style scoped>
a {
  color: inherit;
  text-decoration: none;
}

/* banner */
.home-banner-box {
  width: 100%;
  padding: 30px 0;
}

.home-banner-swiper {
  width: 1200px;
  border-radius: 12px;
  height: 340px;
  background-color: #f7f7f7;
  overflow: hidden;
}

.banner-swiper {
  width: 1200px;
  height: 340px;
  border-radius: 12px;
}

.carousel-img {
  width: 100%;
  height: 340px;
}

.banner-swiper >>> .el-carousel__button {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.banner-swiper >>> .is-active .el-carousel__button {
  width: 22px;
  height: 8px;
  background-color: #ffffff;
  border-radius: 8px;
}

.banner-swiper >>> img {
  border-radius: 12px;
}

/* 头部 - 专业列表 */
.profession-nav {
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 190px;
  height: 340px;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12px 0 0 12px;
}

.profession-nav:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.profession-nav-item,
.more-link-item {
  display: block;
  width: 190px;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.profession-nav-item:hover,
.more-link-item:hover {
  text-decoration: revert;
}

.profession-nav-item:hover,
.more-link-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.more-menu-item {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.more-panel-relative-box:hover .more-menu-item {
  /* background-color: rgba(0, 0, 0, 0.2);
  color: #3480ff; */
  text-decoration: revert;
}

.more-panel-relative-box:hover .more-panel {
  display: inline-block;
}

.more-panel {
  display: none;
  position: absolute;
  bottom: -6px;
  left: 190px;
  width: 190px;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 0px 12px 12px 0px;
}

/* 头部资讯 */
.top-news {
  z-index: 100;
  position: absolute;
  right: 30px;
  top: 30px;
  width: 312px;
  height: 280px;
  line-height: 40px;
  padding: 20px 0 12px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  color: #fff;
}

.top-news:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.top-news-img {
  /* css-ignore */
  width: 25px;
  height: 23px;
}

.top-news-title {
  /* css-ignore */
  margin-left: 2px;
  font-family: 'PingFangSC-Semibold, PingFang SC';
}

.info-list {
  margin-top: 14px;
}

.info-list-item {
  padding: 0 16px 0 20px;
}

.info-list-item:hover a,
.course-info-list-item:hover a {
  text-decoration: revert;
}

.info-list-item:hover,
.course-info-list-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.course-info-list {
  margin-top: 0px;
}

.course-info-list-item {
  padding: 0 16px 0 20px;
  /* margin-bottom: 18px; */
}

.course-info-list-item-current {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 专业首页轮播左侧 */
.left-top {
  display: block;
  padding: 10px 10px;
  font-size: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px 0px 0px 0px;
}

.left-top-title {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}

.cut-down-day {
  color: #ff7038;
  font-size: 24px;
}

.left-middle {
  margin: 20px 20px 20px 10px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}

.middle-item {
  margin-top: 30px;
}

.middle-item:first-of-type {
  margin-top: 0;
}

.middle-item-img {
  /* css-ignore */
  width: 16px;
  height: 18px;
  margin-right: 1px;
}

.white-line {
  margin: 0 14px;
  width: 200px;
  height: 1px;
  background-color: #fff;
}

.left-bottom {
  margin: -10px 10px 20px;
}

.bottom-item {
  margin-top: 30px;
  width: 100px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
}

.bottom-item:nth-of-type(2n) {
  margin-left: 3px;
  text-align: right;
}

.banner-left-middle:hover a,
.banner-left-middle:hover {
  /* color: #3480ff; */
  text-decoration: revert;
}

.title-img {
  width: 94px;
  height: 27px;
  margin-left: 16px;
}

.more-box {
  margin-right: 16px;
}

.more-text {
  line-height: 20px;
  margin-right: 4px;
  font-size: 14px;
}

.more-icon {
  font-size: 12px;
}
</style>
